<template>
  <section class="role-box">
    <img src="@/assets/role.png">
    <img
      class="phone-role"
      src="@/assets/gab.png"
    >
  </section>
</template>

<style lang="less" scoped>
.role-box {
  width: 666px;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  opacity: 1;
  img {
    display: block;
    width: 100%;
    user-select: none;
    pointer-events: none;
  }
  .phone-role {
    display: none;
  }
}
.role-text {
  position: absolute;
  font-size: 50px;
  font-weight: bold;
}
.text-left {
  top: 120px;
  left: 20px;
}
.text-right {
  top: 180px;
  left: 460px;
}
</style>
